<template>
  <div class="panorama-map-nav">
    <!-- 触发按钮 -->
    <el-button 
      class="panorama-trigger"
      @click="visible = true"
      circle
    >
      <el-icon><Grid /></el-icon>
    </el-button>

    <!-- 全景地图全屏对话框 -->
    <el-dialog
      v-model="visible"
      fullscreen
      :show-close="false"
      class="panorama-dialog"
    >
      <div class="panorama-container">
        <!-- 顶部控制栏 -->
        <div class="panorama-header">
          <div class="header-left">
            <h2>
              <el-icon><Grid /></el-icon>
              功能全景地图
            </h2>
            <el-tag type="info" size="small">共{{ totalFunctions }}个功能</el-tag>
          </div>
          
          <div class="header-center">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索功能..."
              clearable
              style="width: 400px"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>

          <div class="header-right">
            <el-button-group>
              <el-button 
                :type="viewMode === 'module' ? 'primary' : ''" 
                @click="viewMode = 'module'"
              >
                <el-icon><Menu /></el-icon>
                模块视图
              </el-button>
              <el-button 
                :type="viewMode === 'category' ? 'primary' : ''" 
                @click="viewMode = 'category'"
              >
                <el-icon><Grid /></el-icon>
                分类视图
              </el-button>
              <el-button 
                :type="viewMode === 'list' ? 'primary' : ''" 
                @click="viewMode = 'list'"
              >
                <el-icon><List /></el-icon>
                列表视图
              </el-button>
            </el-button-group>
            
            <el-divider direction="vertical" />
            
            <el-button @click="handleZoomIn">
              <el-icon><ZoomIn /></el-icon>
            </el-button>
            <el-button @click="handleZoomOut">
              <el-icon><ZoomOut /></el-icon>
            </el-button>
            
            <el-divider direction="vertical" />
            
            <el-button @click="visible = false">
              <el-icon><Close /></el-icon>
              关闭
            </el-button>
          </div>
        </div>

        <!-- 地图内容区域 -->
        <div class="panorama-content" :style="{ transform: `scale(${zoomLevel})` }">
          <!-- 模块视图 -->
          <div v-if="viewMode === 'module'" class="module-view">
            <div 
              v-for="module in filteredModules" 
              :key="module.key"
              class="module-section"
            >
              <div class="module-header">
                <div class="module-title">
                  <div class="module-icon" :style="{ background: module.gradient }">
                    <el-icon><component :is="module.icon" /></el-icon>
                  </div>
                  <h3>{{ module.title }}</h3>
                  <el-tag :type="module.badgeType" size="small" v-if="module.badge">
                    {{ module.badge }}
                  </el-tag>
                </div>
                <div class="module-count">{{ module.children.length }} 个功能</div>
              </div>
              
              <div class="module-functions">
                <div 
                  v-for="func in module.children" 
                  :key="func.path"
                  class="function-card"
                  @click="navigateTo(func.path)"
                >
                  <div class="card-icon" :style="{ color: module.color }">
                    <el-icon><component :is="func.icon" /></el-icon>
                  </div>
                  <div class="card-content">
                    <div class="card-title">{{ func.title }}</div>
                    <div class="card-desc" v-if="func.description">{{ func.description }}</div>
                  </div>
                  <el-tag v-if="func.badge" :type="func.badgeType || 'primary'" size="small">
                    {{ func.badge }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 分类视图 -->
          <div v-else-if="viewMode === 'category'" class="category-view">
            <div class="category-grid">
              <div 
                v-for="item in allFunctionsFlat" 
                :key="item.path"
                class="category-item"
                @click="navigateTo(item.path)"
              >
                <div class="item-icon" :style="{ background: item.gradient || item.color }">
                  <el-icon><component :is="item.icon" /></el-icon>
                </div>
                <div class="item-title">{{ item.title }}</div>
                <el-tag v-if="item.badge" :type="item.badgeType" size="small" class="item-badge">
                  {{ item.badge }}
                </el-tag>
              </div>
            </div>
          </div>

          <!-- 列表视图 -->
          <div v-else class="list-view">
            <el-table :data="allFunctionsFlat" height="calc(100vh - 180px)" stripe>
              <el-table-column prop="title" label="功能名称" width="200">
                <template #default="{ row }">
                  <div class="list-title">
                    <el-icon :style="{ color: row.color }">
                      <component :is="row.icon" />
                    </el-icon>
                    <span>{{ row.title }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="module" label="所属模块" width="150" />
              <el-table-column prop="path" label="路径" min-width="200" />
              <el-table-column prop="description" label="功能说明" min-width="250" show-overflow-tooltip />
              <el-table-column label="标签" width="120">
                <template #default="{ row }">
                  <el-tag v-if="row.badge" :type="row.badgeType" size="small">
                    {{ row.badge }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="{ row }">
                  <el-button type="primary" size="small" @click="navigateTo(row.path)">
                    <el-icon><Position /></el-icon>
                    前往
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 底部统计栏 -->
        <div class="panorama-footer">
          <div class="footer-stats">
            <div class="stat-item">
              <el-icon><Grid /></el-icon>
              <span>{{ filteredModules.length }} 个模块</span>
            </div>
            <div class="stat-item">
              <el-icon><Document /></el-icon>
              <span>{{ totalFunctions }} 个功能</span>
            </div>
            <div class="stat-item">
              <el-icon><Star /></el-icon>
              <span>{{ favoriteCount }} 个收藏</span>
            </div>
            <div class="stat-item">
              <el-icon><Clock /></el-icon>
              <span>{{ recentCount }} 个最近访问</span>
            </div>
          </div>
          <div class="footer-tips">
            <kbd>Ctrl + G</kbd> 打开全景地图 · <kbd>Esc</kbd> 关闭 · <kbd>/</kbd> 聚焦搜索
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Grid, Search, Menu, List, ZoomIn, ZoomOut, Close, Document,
  Star, Clock, Position
} from '@element-plus/icons-vue'

const router = useRouter()

const visible = ref(false)
const viewMode = ref('module') // module, category, list
const searchKeyword = ref('')
const zoomLevel = ref(1)
const favoriteCount = ref(12)
const recentCount = ref(8)

// 所有功能模块数据
const modules = ref([
  {
    key: 'lowcode',
    title: '低代码平台',
    icon: 'MagicStick',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    color: '#667eea',
    badge: 'AI',
    badgeType: 'danger',
    children: [
      { path: '/lowcode', title: '平台主页', icon: 'HomeFilled', badge: 'NEW', description: '低代码平台统一入口' },
      { path: '/lowcode/ai-assistant', title: 'AI助手', icon: 'MagicStick', badge: 'HOT', description: 'AI智能辅助开发' },
      { path: '/lowcode/quick-builder', title: '快速搭建', icon: 'Guide', badge: 'HOT', description: '3分钟搭建应用' },
      { path: '/lowcode/form-designer', title: '表单设计器', icon: 'Edit', description: '可视化表单设计' },
      { path: '/lowcode/page-designer', title: '页面设计器', icon: 'Document', description: '拖拽式页面设计' },
      { path: '/lowcode/api-designer', title: 'API设计器', icon: 'Connection', badge: 'NEW', description: 'API接口设计' },
      { path: '/lowcode/flow-designer', title: '流程设计器', icon: 'Share', description: '工作流程设计' },
      { path: '/lowcode/model-designer', title: '数据模型', icon: 'Coin', description: '数据建模工具' },
      { path: '/lowcode/code-generator', title: '代码生成器', icon: 'Cpu', badge: 'NEW', description: '智能代码生成' },
      { path: '/lowcode/component-market', title: '组件市场', icon: 'ShoppingBag', badge: 'HOT', description: '海量组件资源' },
      { path: '/lowcode/component-library', title: '组件库', icon: 'Box', description: '组件管理' },
      { path: '/lowcode/template-market', title: '模板广场', icon: 'Shop', badge: 'NEW', description: '精品模板' },
      { path: '/lowcode/templates', title: '模板中心', icon: 'FolderOpened', description: '模板管理' },
      { path: '/lowcode/applications', title: '应用管理', icon: 'Grid', description: '应用列表' }
    ]
  },
  {
    key: 'contract',
    title: '合同管理',
    icon: 'Document',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    color: '#f093fb',
    badge: 'NEW',
    badgeType: 'success',
    children: [
      { path: '/contract/list', title: '合同列表', icon: 'Document', badge: 'HOT', description: '合同CRUD管理' },
      { path: '/contract/create', title: '新建合同', icon: 'DocumentAdd', description: '创建新合同' },
      { path: '/contract/approval', title: '合同审批', icon: 'CircleCheck', description: '审批流程' },
      { path: '/contract/template', title: '合同模板', icon: 'FolderOpened', description: '模板管理' },
      { path: '/contract/statistics', title: '合同统计', icon: 'DataAnalysis', description: '数据分析' },
      { path: '/contract/reminder', title: '合同提醒', icon: 'Bell', description: '到期提醒' }
    ]
  },
  {
    key: 'asset',
    title: '资产管理',
    icon: 'Box',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    color: '#4facfe',
    badge: 'NEW',
    badgeType: 'success',
    children: [
      { path: '/asset/list', title: '资产列表', icon: 'Box', badge: 'HOT', description: '资产台账管理' },
      { path: '/asset/create', title: '新增资产', icon: 'Plus', description: '登记新资产' },
      { path: '/asset/inventory', title: '资产盘点', icon: 'DocumentChecked', description: '盘点管理' },
      { path: '/asset/transfer', title: '资产调拨', icon: 'Position', description: '部门调拨' },
      { path: '/asset/maintenance', title: '维修保养', icon: 'Tools', description: '维保管理' },
      { path: '/asset/disposal', title: '资产报废', icon: 'Delete', description: '报废处理' },
      { path: '/asset/statistics', title: '资产统计', icon: 'DataAnalysis', description: '统计分析' }
    ]
  },
  {
    key: 'equipment',
    title: '设备管理',
    icon: 'SetUp',
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    color: '#43e97b',
    badge: 'NEW',
    badgeType: 'success',
    children: [
      { path: '/equipment/ledger', title: '设备台账', icon: 'SetUp', badge: 'HOT', description: '设备台账管理' },
      { path: '/equipment/create', title: '新增设备', icon: 'Plus', description: '登记新设备' },
      { path: '/equipment/inspection', title: '设备巡检', icon: 'View', description: '日常巡检' },
      { path: '/equipment/spot-check', title: '设备点检', icon: 'CircleCheck', description: '点检管理' },
      { path: '/equipment/maintenance', title: '维保计划', icon: 'Calendar', description: '维保计划' },
      { path: '/equipment/repair', title: '故障维修', icon: 'Tools', description: '故障处理' },
      { path: '/equipment/spare-parts', title: '备件库存', icon: 'Box', description: '备件管理' },
      { path: '/equipment/oee', title: '设备效率OEE', icon: 'TrendCharts', badge: 'HOT', description: 'OEE分析' },
      { path: '/equipment/statistics', title: '设备统计', icon: 'DataAnalysis', description: '统计分析' }
    ]
  },
  {
    key: 'sales',
    title: '销售管理',
    icon: 'ShoppingCart',
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    color: '#fa709a',
    children: [
      { path: '/sales/orders', title: '销售订单', icon: 'Document', description: '订单管理' },
      { path: '/sales/quotation', title: '销售报价', icon: 'Money', description: '报价单' },
      { path: '/sales/delivery', title: '销售出库', icon: 'Upload', description: '出库单' },
      { path: '/sales/returns', title: '销售退货', icon: 'RefreshRight', description: '退货单' },
      { path: '/sales/customer-crm', title: '客户管理', icon: 'UserFilled', badge: 'NEW', description: 'CRM系统' }
    ]
  },
  {
    key: 'purchase',
    title: '采购管理',
    icon: 'ShoppingBag',
    gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    color: '#30cfd0',
    children: [
      { path: '/purchase/orders', title: '采购订单', icon: 'Document', description: '采购单管理' },
      { path: '/purchase/suppliers', title: '供应商', icon: 'OfficeBuilding', description: '供应商管理' },
      { path: '/purchase/receipts', title: '采购入库', icon: 'Download', description: '入库单' },
      { path: '/purchase/returns', title: '采购退货', icon: 'RefreshRight', description: '退货单' },
      { path: '/purchase/supplier-evaluation', title: '供应商评估', icon: 'Medal', badge: 'NEW', description: '绩效评估' }
    ]
  },
  {
    key: 'inventory',
    title: '库存管理',
    icon: 'Box',
    gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    color: '#a8edea',
    children: [
      { path: '/inventory/products', title: '商品管理', icon: 'Goods', description: '商品信息' },
      { path: '/inventory/categories', title: '分类管理', icon: 'Menu', description: '商品分类' },
      { path: '/inventory/stock', title: '库存查询', icon: 'Coin', description: '库存状态' },
      { path: '/inventory/warehouses', title: '仓库管理', icon: 'House', description: '仓库信息' },
      { path: '/inventory/transfers', title: '库存调拨', icon: 'Sort', description: '调拨单' },
      { path: '/inventory/check-dashboard', title: '盘点驾驶舱', icon: 'DataBoard', badge: 'HOT', description: '盘点看板' },
      { path: '/inventory/replenish-analysis', title: '智能补货', icon: 'TrendCharts', badge: 'AI', description: 'AI补货分析' }
    ]
  },
  {
    key: 'manufacturing',
    title: '生产制造',
    icon: 'Operation',
    gradient: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    color: '#ff9a9e',
    badge: 'NEW',
    badgeType: 'warning',
    children: [
      { path: '/manufacturing/plan', title: '生产计划', icon: 'Calendar', badge: 'HOT', description: '生产计划' },
      { path: '/manufacturing/orders', title: '生产订单', icon: 'Document', description: '生产订单' },
      { path: '/manufacturing/work-orders', title: '工单管理', icon: 'Tickets', description: '工单' },
      { path: '/manufacturing/progress', title: '生产进度', icon: 'TrendCharts', badge: 'HOT', description: '进度跟踪' },
      { path: '/manufacturing/quality', title: '质量检验', icon: 'CircleCheck', description: '质检管理' },
      { path: '/manufacturing/capacity', title: '产能分析', icon: 'DataAnalysis', badge: 'NEW', description: '产能统计' }
    ]
  },
  {
    key: 'finance',
    title: '财务管理',
    icon: 'Wallet',
    gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    color: '#ffecd2',
    children: [
      { path: '/finance/voucher', title: '凭证管理', icon: 'DocumentCopy', description: '记账凭证' },
      { path: '/finance/accounts', title: '科目管理', icon: 'Files', description: '会计科目' },
      { path: '/finance/period', title: '期间管理', icon: 'Calendar', description: '会计期间' },
      { path: '/finance/cost-accounting', title: '成本核算', icon: 'Money', badge: 'HOT', description: '成本分析' },
      { path: '/finance/reports', title: '财务报表', icon: 'DataBoard', description: '财务报表' }
    ]
  },
  {
    key: 'hr',
    title: '人力资源',
    icon: 'User',
    gradient: 'linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%)',
    color: '#ff6e7f',
    children: [
      { path: '/hr/employees', title: '员工管理', icon: 'User', description: '员工档案' },
      { path: '/hr/attendance', title: '考勤管理', icon: 'Clock', description: '考勤记录' },
      { path: '/hr/salary', title: '薪资管理', icon: 'Money', description: '工资核算' },
      { path: '/hr/recruitment', title: '招聘管理', icon: 'UserFilled', description: '招聘流程' },
      { path: '/hr/training', title: '培训管理', icon: 'Reading', description: '培训计划' }
    ]
  },
  {
    key: 'reports',
    title: '综合报表',
    icon: 'DataBoard',
    gradient: 'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)',
    color: '#e0c3fc',
    badge: 'HOT',
    badgeType: 'danger',
    children: [
      { path: '/reports', title: '报表中心', icon: 'DataBoard', badge: 'NEW', description: '报表首页' },
      { path: '/reports/sales', title: '销售报表', icon: 'TrendCharts', description: '销售数据' },
      { path: '/reports/inventory', title: '库存报表', icon: 'Box', description: '库存数据' },
      { path: '/reports/finance', title: '财务报表', icon: 'Money', description: '财务数据' },
      { path: '/reports/purchase', title: '采购报表', icon: 'Van', description: '采购数据' },
      { path: '/reports/bi-dashboard', title: 'BI商业智能', icon: 'DataLine', badge: 'HOT', description: 'BI分析' }
    ]
  },
  {
    key: 'member',
    title: '会员管理',
    icon: 'UserFilled',
    gradient: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)',
    color: '#f77062',
    badge: 'NEW',
    badgeType: 'success',
    children: [
      { path: '/member/members', title: '会员资料', icon: 'User', badge: 'HOT', description: '会员信息' },
      { path: '/member/levels', title: '等级管理', icon: 'TrendCharts', description: '会员等级' },
      { path: '/member/vip-card', title: 'VIP卡', icon: 'Medal', description: 'VIP卡管理' },
      { path: '/member/points-strategy', title: '积分策略', icon: 'Star', description: '积分规则' },
      { path: '/member/marketing', title: '营销活动', icon: 'Promotion', description: '会员营销' }
    ]
  },
  {
    key: 'system',
    title: '系统管理',
    icon: 'Setting',
    gradient: 'linear-gradient(135deg, #c471f5 0%, #fa71cd 100%)',
    color: '#c471f5',
    children: [
      { path: '/system/users', title: '用户管理', icon: 'User', description: '系统用户' },
      { path: '/system/roles', title: '角色管理', icon: 'UserFilled', description: '角色权限' },
      { path: '/system/menu', title: '菜单管理', icon: 'Menu', description: '菜单配置' },
      { path: '/system/settings', title: '系统设置', icon: 'Setting', description: '系统参数' },
      { path: '/system/logs', title: '操作日志', icon: 'Document', description: '日志查询' }
    ]
  }
])

// 过滤后的模块
const filteredModules = computed(() => {
  if (!searchKeyword.value) return modules.value
  
  const keyword = searchKeyword.value.toLowerCase()
  return modules.value.map(module => ({
    ...module,
    children: module.children.filter(func => 
      func.title.toLowerCase().includes(keyword) ||
      func.path.toLowerCase().includes(keyword) ||
      (func.description && func.description.includes(keyword))
    )
  })).filter(module => module.children.length > 0)
})

// 所有功能扁平化
const allFunctionsFlat = computed(() => {
  const result = []
  filteredModules.value.forEach(module => {
    module.children.forEach(func => {
      result.push({
        ...func,
        module: module.title,
        color: module.color,
        gradient: module.gradient
      })
    })
  })
  return result
})

// 总功能数
const totalFunctions = computed(() => {
  return modules.value.reduce((sum, module) => sum + module.children.length, 0)
})

// 导航到指定页面
const navigateTo = (path) => {
  router.push(path)
  visible.value = false
  ElMessage.success('跳转成功')
}

// 缩放
const handleZoomIn = () => {
  if (zoomLevel.value < 1.5) {
    zoomLevel.value += 0.1
  }
}

const handleZoomOut = () => {
  if (zoomLevel.value > 0.5) {
    zoomLevel.value -= 0.1
  }
}

// 全局快捷键
const handleGlobalKeydown = (event) => {
  // Ctrl + G 打开全景地图
  if ((event.ctrlKey || event.metaKey) && event.key === 'g') {
    event.preventDefault()
    visible.value = true
  }
  
  // Esc 关闭
  if (event.key === 'Escape' && visible.value) {
    visible.value = false
  }
  
  // / 聚焦搜索
  if (event.key === '/' && visible.value) {
    event.preventDefault()
    document.querySelector('.panorama-header input')?.focus()
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleGlobalKeydown)
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleGlobalKeydown)
})
</script>

<style scoped>
.panorama-trigger {
  position: fixed;
  right: 30px;
  bottom: 300px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(67, 233, 123, 0.4);
  z-index: 1000;
  transition: all 0.3s;
}

.panorama-trigger:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(67, 233, 123, 0.5);
}

:deep(.panorama-dialog) {
  background: rgba(0, 0, 0, 0.95);
}

:deep(.panorama-dialog .el-dialog__body) {
  padding: 0;
  height: 100vh;
}

.panorama-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0a0e27;
}

/* 顶部控制栏 */
.panorama-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  color: white;
  font-weight: 600;
}

/* 内容区域 */
.panorama-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px 40px;
  transition: transform 0.3s;
}

/* 模块视图 */
.module-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 30px;
}

.module-section {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

.module-section:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.module-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.module-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.module-title h3 {
  margin: 0;
  font-size: 20px;
  color: white;
  font-weight: 600;
}

.module-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.module-functions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.function-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.3s;
}

.function-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(5px);
}

.card-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 14px;
  color: white;
  font-weight: 500;
  margin-bottom: 4px;
}

.card-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分类视图 */
.category-view {
  max-width: 1400px;
  margin: 0 auto;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.category-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.item-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
}

.item-title {
  font-size: 14px;
  color: white;
  font-weight: 500;
  text-align: center;
}

.item-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* 列表视图 */
.list-view {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
}

.list-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: white;
}

/* 底部统计栏 */
.panorama-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.footer-tips {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-tips kbd {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 12px;
  color: white;
  font-family: monospace;
  margin: 0 4px;
}

/* 滚动条 */
.panorama-content::-webkit-scrollbar {
  width: 8px;
}

.panorama-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.panorama-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.panorama-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>

